<template>
    <div>
        <UserLayout>
            <div class="app-row app-col-space10">
                <div class="app-col-xs12 app-col-sm8">
                    <div class="app-card">
                        <div class="app-card-header">
                            <div>欢迎您, <span class="text-cyan">{{store.userInfo.nickname || '-'}}</span></div>
                            <div class="header-setting">
                                <a-tooltip>
                                    <template v-slot:title>信息变更</template>
                                    <a-button
                                            type="dashed"
                                            shape="circle"
                                            size="small"
                                            @click="goUrl('/user-edit')"
                                    >
                                        <EditOutlined/>
                                    </a-button>
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="app-card-body">

                            <div class="app-row app-col-space10">
                                <div class="app-col-xs6">
                                    <div class="user-item">
                                        <div class="item-title text-elip" v-if="store.userInfo.account">{{store.userInfo.account || '-'}}</div>
                                        <div class="item-title text-elip" v-else>
                                            <a-button
                                                    type="dashed"
                                                    size="small"
                                                    @click="goUrl('/user/bind-account')"
                                            >绑定</a-button>
                                        </div>
                                        <div class="item-text">账号</div>
                                    </div>
                                </div>
                                <div class="app-col-xs6">
                                    <div class="user-item">
                                        <div class="item-title text-elip" v-if="store.userInfo.tel">
                                            {{store.userInfo.tel}}
                                        </div>
                                        <div class="item-title text-elip" v-else>
                                            <a-button
                                                    type="dashed"
                                                    size="small"
                                                    @click="goUrl('/user/bind-phone')"
                                            >绑定
                                            </a-button>
                                        </div>
                                        <div class="item-text">
                                            手机号
                                            <a-button
                                                    class="margin-left"
                                                    type="dashed"
                                                    size="small"
                                                    @click="goUrl('/user/bind-phone')"
                                                    v-if="store.userInfo.tel"
                                            >换绑
                                            </a-button>
                                            <a-popconfirm
                                                    title="确认操作?"
                                                    ok-text="是"
                                                    cancel-text="否"
                                                    @confirm="delBindPhone"
                                                    v-if="store.userInfo.tel"
                                            >
                                                <a-button
                                                        class="margin-left"
                                                        type="danger"
                                                        size="small"
                                                        v-if="store.userInfo.account && store.userInfo.tel"
                                                >解绑
                                                </a-button>
                                            </a-popconfirm>
                                        </div>
                                    </div>
                                </div>

                                <div class="app-col-xs6">
                                    <div class="user-item">
                                        <div class="item-title text-elip">{{store.key || '-'}}</div>
                                        <div class="item-text">令牌</div>
                                    </div>
                                </div>
                                <div class="app-col-xs6">
                                    <div class="user-item">
                                        <div class="item-title text-elip">{{store.userInfo.nickname || '-'}}</div>
                                        <div class="item-text">昵称</div>
                                    </div>
                                </div>
                                <div class="app-col-xs6">
                                    <div class="user-item">
                                        <div class="item-title text-elip">{{store.userInfo.email || '-'}}</div>
                                        <div class="item-text">邮箱</div>
                                    </div>
                                </div>
                                <div class="app-col-xs6">
                                    <div class="user-item">
                                        <div class="item-title text-elip">{{store.userInfo.desc || '-'}}</div>
                                        <div class="item-text">简介</div>
                                    </div>
                                </div>
                                <div class="app-col-xs6">
                                    <div class="user-item">
                                        <div class="item-title text-elip">{{store.userInfo.create_time || '-'}}</div>
                                        <div class="item-text">注册时间</div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="app-col-xs12 app-col-sm4">
                    <HeadImg></HeadImg>
                </div>
            </div>
        </UserLayout>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import website from "/src/config/website";
    import {goUrl} from '/src/util/index';

    import UserLayout from '/src/components/user/Layout.vue';
    import HeadImg from '/src/components/user/HeadImg.vue';

    import {PlusOutlined, LoadingOutlined, EditOutlined} from '@ant-design/icons-vue';

    import {delPhone} from '/src/request/api/user';

    export default {
        name: "user",
        // 组件
        components: {
            UserLayout,
            HeadImg,
            LoadingOutlined,
            PlusOutlined,
            EditOutlined,
        },
        // 数据
        data() {
            return {
                website: website,
                // vuex 状态
                store: useStore().state,
            }
        },
        // DOM未渲染前调用
        created() {
            this.init();
        },
        // DOM渲染后调用
        mounted() {

        },
        // 方法
        methods: {
            // 初始化
            init() {
                this.$store.dispatch("getInfo");
            },
            // 前往
            goUrl(url) {
                goUrl(url);
            },
            // 解绑手机号
            delBindPhone() {
                let that = this;
                delPhone().then(res => {
                    that.$message.success(res.msg);
                    that.$store.dispatch("getInfo");
                }).catch(err => {
                    console.log(err);
                    that.$message.error(err.msg);
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .user-item {
        padding: 10px;
        border-radius: 6px;
        background-color: #f5f5f5;

        &:hover {
            /*cursor: pointer;*/
        }

        .item-title {
            height: 26px;
            line-height: 26px;
            font-size: 16px;
        }

        .item-text {
            font-size: 12px;
            height: 24px;
            line-height: 24px;
            color: #666;
            margin-top: 5px;
        }
    }

</style>